<template>
  <div class="new-fan-main">
    <div class="new-fan-head">
      <div class="head-title">接受新客户</div>
      <div class="head-setting">
        <div class="check-box">
          <el-checkbox v-model="checked" />
          <span>首次自动应用</span>
        </div>
        <el-tooltip
          class="item"
          effect="dark"
          placement="top"
          style="margin-right: 8px"
        >
          <div slot="content">
            开启后，首次登录本账号的企微号<br />，登录成功5分钟后会自动应用列表中的<br />所有配置。
          </div>
          <svg-icon icon-class="iquestion" />
        </el-tooltip>
        <el-button type="warning" size="mini" @click="dialogVisible = true"
          >应用配置</el-button
        >
        <el-button plain size="mini" @click="acceptDialogVisible = true"
          >应用管理</el-button
        >
      </div>
    </div>
    <el-form
      ref="form"
      :model="form"
      label-width="120px"
      class="new-fan-body"
      label-position="left"
    >
      <div class="config-box">
        <div class="config-tips">
          <el-alert type="warning" show-icon>
            <div
              slot="title"
              style="
                font-size: 14px;
                line-height: 22px;
                color: rgba(0, 0, 0, 0.85);
              "
            >
              设置完成后，请点击右上角“应用配置”按钮，才能生效；如需单个企微号配置或查看具体客户添加详情请前往
              “<a style="color: #3070ff">单号配置</a>”
            </div>
          </el-alert>
        </div>
        <div class="config-settig-card">
          <div class="card-head">
            <div class="card-title">基本设置</div>
            <el-tooltip class="item" effect="dark" placement="top">
              <div slot="content">
                打开企业微信手机客户端，“设置-隐<br />私-加我为联系人时需要验证”的开关打<br />开，否则该功能无法生效
              </div>
              <span class="tips-text">为什么没有生效？</span>
            </el-tooltip>
          </div>
          <div class="card-content">
            <el-form-item label="接受上限：">
              <el-radio-group v-model="form.toplimit">
                <el-radio :label="1">不限</el-radio>
                <el-radio :label="2">
                  <el-input
                    size="small"
                    style="width: 88px"
                    value="200"
                    :disabled="form.toplimit == 1"
                  />
                  <span style="color: rgba(0, 0, 0, 0.65); margin-left: 4px"
                    >人</span
                  >
                </el-radio>
              </el-radio-group>
              <div class="desc">每日00:00开始自动通过新客户申请数量上限</div>
            </el-form-item>
            <el-form-item label="接受频率：">
              <div class="threshold-flex">
                <el-input
                  size="small"
                  v-model="form.min"
                  @blur="onBlur('min')"
                />
                <span style="color: rgb(136, 137, 153)">-</span>
                <el-input
                  size="small"
                  v-model="form.max"
                  @blur="onBlur('min')"
                />
                <span>秒</span>
                <span class="recommend-value" @click="handleRestNum"
                  >使用推荐值</span
                >
              </div>
              <div class="desc">自动通过新客户申请的间隔时间区间</div>
            </el-form-item>
            <el-form-item label="休眠时段：">
              <el-switch
                v-model="form.sleepTime"
                :active-value="1"
                :inactive-value="0"
              />
              <span class="tips"
                >开启后，休眠时段内新客户正常收录到待接受列表，但不执行添加，过后自动恢复</span
              >
              <div v-if="form.sleepTime" class="sleep-rows-item">
                <span>每日</span>
                <el-time-select
                  v-model="form.time_min"
                  size="small"
                  placeholder="选择时间"
                  style="width: 118px"
                />
                <span style="color: rgb(136, 137, 153)">-</span>
                <el-time-select
                  v-model="form.time_max"
                  size="small"
                  placeholder="选择时间"
                  style="width: 118px"
                />
                <span>不自动通过</span>
              </div>
            </el-form-item>
          </div>
        </div>
        <div class="config-settig-card">
          <div class="card-head">
            <div class="card-title">
              接受条件
              <span
                style="
                  font-size: 12px;
                  font-weight: 400;
                  color: rgba(0, 0, 0, 0.45);
                "
                >（同时满足所有条件才会被接受）</span
              >
            </div>
          </div>
          <div class="card-content">
            <el-form-item label="来源：">
              <el-radio-group v-model="form.from">
                <el-radio :label="1">全部接受</el-radio>
                <el-radio :label="2">只接受部分来源</el-radio>
              </el-radio-group>
              <div class="condition-block" v-if="form.from === 2">
                <div class="condition-label">接受的来源：</div>
                <div class="condition-value">
                  <el-checkbox-group v-model="form.checkList">
                    <el-checkbox
                      v-for="(item, index) in sourceList"
                      :key="index"
                      :label="item.value"
                      class="mr-20"
                      >{{ item.label }}</el-checkbox
                    >
                  </el-checkbox-group>
                  <!-- <el-checkbox v-for="(item, index) in sourceList" :key="index">{{item}}</el-checkbox> -->
                </div>
              </div>
            </el-form-item>
            <el-form-item label="昵称：">
              <el-radio-group v-model="form.nick">
                <el-radio :label="1">全部接受</el-radio>
                <el-radio :label="2">
                  <span style="color: rgb(251, 88, 78)">不接受</span>部分昵称
                </el-radio>
              </el-radio-group>
              <div class="condition-block" v-if="form.nick === 2">
                <div class="condition-label">
                  <span style="color: rgb(251, 88, 78)">不接受</span>的昵称：
                </div>
                <div class="condition-value">
                  <el-input
                    v-model="tag1"
                    size="small"
                    maxlength="10"
                    style="width:260px"
                    placeholder="最多10个字按回车确认"
                    @keyup.enter.native="handleAdd('tag1','nickList')"
                  />
                  <div v-if="form.nickList.length" class="keywordcontent pb-8 pl-8 bg_fff flex flexwrap aligncenter mt-8">
                    <div v-for="(item,index) in form.nickList" :key="index" @click="removeTag(index,'nickList')" class="tagitem flexcenter mr-8 mt-8">
                      {{item}}  <i class="el-icon-close commhover pl-5"></i>
                    </div>
                  </div>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="验证消息：">
              <el-radio-group v-model="form.validate">
                <el-radio :label="1">全部接受</el-radio>
                <el-radio :label="2">只接受部分验证消息</el-radio>
              </el-radio-group>
              <div class="condition-block" v-if="form.validate === 2">
                <div class="condition-label">接受的验证消息：</div>
                <div class="condition-value">
                  <el-input
                    v-model="tag2"
                    size="small"
                    maxlength="10"
                    style="width:260px"
                    placeholder="最多10个字按回车确认"
                    @keyup.enter.native="handleAdd('tag2','validateList')"
                  />
                  <div v-if="form.validateList.length" class="keywordcontent pb-8 pl-8 bg_fff flex flexwrap aligncenter mt-8">
                    <div v-for="(item,index) in form.validateList" :key="index" @click="removeTag(index,'validateList')" class="tagitem flexcenter mr-8 mt-8">
                      {{item}}  <i class="el-icon-close commhover pl-5"></i>
                    </div>
                  </div>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="企业微信：">
              <el-radio-group v-model="form.wechat">
                <el-radio :label="0">全部接受</el-radio>
                <el-radio :label="1">全部不接受</el-radio>
                <el-radio :label="2">
                  <span style="color: rgb(251, 88, 78)">不接受</span>部分企业
                </el-radio>
              </el-radio-group>
              <div class="condition-block" v-if="form.wechat === 2">
                <div class="condition-label">
                  <span style="color: rgb(251, 88, 78)">不接受</span>的企业：
                </div>
                <div class="condition-value">
                  <el-input
                    v-model="tag3"
                    size="small"
                    maxlength="10"
                    style="width:260px"
                    placeholder="最多10个字按回车确认"
                    @keyup.enter.native="handleAdd('tag3','wechatList')"
                  />
                  <div v-if="form.wechatList.length" class="keywordcontent pb-8 pl-8 bg_fff flex flexwrap aligncenter mt-8">
                    <div v-for="(item,index) in form.wechatList" :key="index" @click="removeTag(index,'wechatList')" class="tagitem flexcenter mr-8 mt-8">
                      {{item}}  <i class="el-icon-close commhover pl-5"></i>
                    </div>
                  </div>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="黑名单客户：">
              <el-radio-group v-model="form.black">
                <el-radio :label="1">全部接受</el-radio>
                <el-radio :label="2">全部不接受</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
    <CheckCompanyDialog
      :visible="dialogVisible"
      @handCloseDialog="onHandCloseDialog"
    />
    <AcceptNewAccountDialog
      :visible="acceptDialogVisible"
      @handCloseDialog="onHandCloseAcceptDialog"
    />
    <div class="new-fan-footer">
      <el-button size="small" type="primary">保存修改</el-button>
      <el-button size="small" type="warning">保存并应用配置</el-button>
    </div>
  </div>
</template>
<script>
import CheckCompanyDialog from "./components/CheckCompanyDialog";
import AcceptNewAccountDialog from "./components/AcceptNewAccountDialog";
export default {
  data() {
    return {
      dialogVisible: false,
      acceptDialogVisible: false,
      checked: true,
      sourceList: [
        { label: "扫一扫添加", value: 1 },
        { label: "名片添加", value: 2 },
        { label: "手机号添加", value: 3 },
        { label: "群聊添加", value: 4 },
        { label: "其他", value: 5 },
      ],
      form: {
        toplimit: 0,
        min: 20,
        max: 30,
        sleepTime: 0,
        time_min: "",
        time_max: "",
        from: 1,
        checkList: [],
        nick: 1,
        nickList:[],
        validate: 1,
        validateList:[],
        wechat: 0,
        wechatList:[],
        black: 1,
      },
      tag1:'',
      tag2:'',
      tag3:'',
    };
  },
  components: {
    CheckCompanyDialog,
    AcceptNewAccountDialog,
  },
  methods: {
    handleRestNum() {
      this.form.min = 20;
      this.form.max = 30;
    },

    onBlur(type) {
      // 使用正则表达式匹配正整数
      const regex = /^[1-9]\d*$/;
      // 如果输入的值不是正整数，则将其设置为上一个有效值
      if (!regex.test(this.form[type])) {
        this.form[type] = 1;
      } else {
        if (this.form[type] > 9999) {
          this.form[type] = 9999;
        }
      }
    },

    handleAdd(val,list){
      if(!this[val]) return
      if (this.form[list].includes(this[val])) {
        this.$message.warning("标签重复");
        return;
      }
      this.form[list].push(this[val]);
      this[val] = "";
    },

    removeTag(index,list){
      this.form[list].splice(index, 1);
    },

    onHandCloseDialog() {
      this.dialogVisible = false;
    },
    onHandCloseAcceptDialog() {
      this.acceptDialogVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.new-fan-main {
  height: calc(100vh - 48px);
  overflow: auto;
  flex: 1 1;
  position: relative;
  .new-fan-head {
    height: 46px;
    background: #fff;
    border-bottom: 1px solid #e9e9e9;
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    .head-title {
      font-size: 14px;
      line-height: 22px;
      .example-text {
        color: #2f54eb;
        cursor: pointer;
        margin-left: 8px;
        font-weight: 400;
        &:hover + .example-modal {
          display: block;
        }
      }
    }
    .head-setting {
      display: flex;
      align-items: center;
      .check-box {
        color: rgba(0, 0, 0, 0.65);
        font-size: 14px;
        line-height: 22px;
        span {
          padding-right: 8px;
          padding-left: 8px;
        }
      }
    }
  }
  .new-fan-body {
    margin: 12px 12px 76px;
    .config-box {
      margin: 0 auto;
      width: 1000px;
      display: flex;
      flex-direction: column;
      .config-settig-card {
        background: #ffffff;
        margin-top: 12px;
        flex: 1 1;
        text-align: left;
        text-align: initial;
        color: rgba(0, 0, 0, 0.85);
        border-radius: 4px;
        background: #fff;
        font-size: 14px;
        .card-head {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #e9e9e9;
          .card-title {
            padding: 16px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
          }
          .tips-text {
            display: block;
            color: rgb(47, 84, 235);
            cursor: pointer;
            font-size: 12px;
            font-weight: 400;
            margin-right: 20px;
          }
        }
        .card-content {
          padding: 20px 20px 0;
          font-size: 14px;
          line-height: 22px;
          .desc {
            font-size: 14px;
            margin-top: 4px;
            color: rgba(0, 0, 0, 0.45);
          }
          .tips {
            margin-left: 4px;
            color: rgba(0, 0, 0, 0.45);
          }
          .sleep-rows-item {
            margin-top: 12px;
            display: grid;
            column-gap: 4px;
            grid-template-columns: 30px 118px 6px 118px 78px;
          }
          .threshold-flex {
            display: grid;
            column-gap: 4px;
            grid-template-columns: 88px 6px 88px 14px 80px;
            .recommend-value {
              color: #3070ff;
            }
          }
          .condition-block {
            margin-top: 12px;
            padding: 16px;
            background: #f7f7f7;
            border-radius: 2px;
            border: 1px solid #e9e9e9;
            display: flex;
            // align-items: center;
            .condition-label {
              width: 120px;
            }
            .condition-value{
              width: calc(100% - 120px);
            }
          }
        }
      }
    }
  }
  .new-fan-footer {
    position: fixed;
    left: 226px;
    right: 0;
    bottom: 0;
    background: #ffffff;
    padding: 12px 16px;
    display: flex;
    align-content: center;
    justify-content: center;
  }
}
.keywordcontent {
  border: 1px solid #e9e9e9;
}
.tagitem {
  height: 32px;
  padding: 0 12px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  color: #222;
}
</style>